<template>
    <view id="certitfy">
        <view>
            <view>
                <van-field
                        :value="params.id_name"
                        placeholder="请输入真实姓名"
                        input-align="right"
                        label="姓名"
                        required
                        :border="has_boder"
                        :disabled=is_disabled
                        @change="confirm1"
                />
            </view>

<!--            <view>-->
<!--            <van-field-->
<!--                    :value="params.bank_number"-->
<!--                    type="number"-->
<!--                    placeholder="请输入银行卡号"-->
<!--                    label="银行卡号"-->
<!--                    input-align="right"-->
<!--                    required-->
<!--                    :border="has_boder"-->
<!--                    @blur="confirm2"-->
<!--            />-->
<!--            </view>-->
            <view>
            <van-field
                    :value="params.id_number"
                    type="idcard"
                    placeholder="请输入身份证"
                    label="身份证号码"
                    input-align="right"
                    required
                    :border="has_boder"
                    :disabled=is_disabled
                    @change="confirm5"
            />
            </view>
<!--            <view  @tap="chooseBankList">-->
<!--                <van-field-->
<!--                        :value="params.bank_name"-->
<!--                        placeholder="请选择银行"-->
<!--                        input-align="right"-->
<!--                        label="银行"-->
<!--                        disabled-->
<!--                        required-->
<!--                        :border="has_boder"-->
<!--                />-->
<!--            </view>-->
<!--            <view>-->
<!--                <van-field-->
<!--                        :value="params.subbranch"-->
<!--                        placeholder="请输入支行名称"-->
<!--                        label="支行名称"-->
<!--                        input-align="right"-->
<!--                        required-->
<!--                        :border="has_boder"-->
<!--                        @blur="confirm3"-->
<!--                />-->
<!--            </view>-->
<!--            <view @tap="chooseAddress" >-->
<!--                <van-field-->
<!--                        :value="params.province+params.city"-->
<!--                        placeholder="请选择城市"-->
<!--                        label="城市"-->
<!--                        input-align="right"-->
<!--                        required-->
<!--                        disabled-->
<!--                        :border="has_boder"-->
<!--                />-->
<!--            </view>-->
<!--            <view v-if="area_is_show" >-->
<!--                <van-area-->
<!--                        :area-list="areaList"-->
<!--                        :columns-placeholder="columns_placeholder"-->
<!--                        @confirm="chooseConfirm"-->
<!--                        @cancel="chooseCancel"-->
<!--                        title="城市选择"-->
<!--                />-->
<!--            </view>-->
<!--            <view v-if="other_is_show">-->
<!--                <van-field-->
<!--                        :value="params.bank_mobile"-->
<!--                        type="number"-->
<!--                        placeholder="请输入手机号"-->
<!--                        label="手机号"-->
<!--                        input-align="right"-->
<!--                        required-->
<!--                        :border="has_boder"-->
<!--                        @blur="confirm4"-->
<!--                />-->
<!--            </view>-->
            </view>


        <view v-if="is_disabled===false" class="button-submit" @tap="commit()">
            <van-button type="info" round size="large" color="#FF9900" >确定</van-button>
        </view>
        <view v-if="is_disabled===true" class="button-submit" >
            <van-button type="info" round size="large" color="#999999" >实名成功</van-button>
        </view>
<!--        <view class="tips"  v-if="other_is_show"><p>温馨提示：不可使用信用卡，否则提现无法到账</p></view>-->

<!--        <van-popup :show="bank_list_show" position="bottom" :overlay="true"  @close="onClose($event)"-->
<!--                   @touchmove.stop.prevent="moveHandle"-->
<!--        >-->
<!--            <van-picker show-toolbar title="选择银行" :columns="bankList" @cancel="onCancel($event)" @confirm="onConfirm($event)" @change="onChange($event)" />-->
<!--        </van-popup>-->
    </view>
</template>

<script>
    import MInput from '@/components/m-input.vue'
    import {cityList} from '@/mock/address.js';
    import {bankList,bankNameList} from '@/mock/bank.js';
    export default{
        name:"certification",
        data(){
            return{
                other_is_show:true,
                area_is_show:false,
                bank_list_show:false,
                has_boder:true,
                params:{
                    id_name:'',
                    bank_number:'',
                    id_number:'',
                    bank_name:'',
                    bank_id:'',
                    subbranch:'',
                    province:'',
                    city:'',
                    bank_mobile:'',
                },
                user_info:this.$store.state.user_info,
                columns_placeholder:['请选择', '请选择'],
                areaList:cityList,
                bankList:bankNameList,
                forEachBank:bankList,
                is_disabled:false
            }
        },
        async onShow(){
            let user_data = await this.$apis.getUserInfo({access_token:''})
            if(user_data.code===0){
                this.user_info=user_data.data
        }
            this.params.id_name=this.user_info.id_name
            this.params.id_number=this.user_info.id_number
            if(this.user_info.is_valid>0){
                this.is_disabled=true
            }

        },
        methods:{
            moveHandle () {},
            chooseAddress(){
                //点击地址选择事件，处理显示模块
                this.changeShowState();
            },
            chooseBankList(){
                //点击选择银行列表
                this.bank_list_show=true
            },
            onChange(event) {// 选择银行事件
            },
            onClose(event) { // 遮罩关闭
                this.bank_list_show=false
            },
            onCancel(event){  //选择器取消
                this.bank_list_show=false
            },
            onConfirm(event){ //银行选择器确认
                this.bank_list_show=false
                const { picker, value, index } = event.detail;
                this.forEachBank.forEach((item)=>{
                    if(item.value===value){
                        this.params.bank_id=item.key
                        this.params.bank_name=value
                        return
                    }
                })
            },

            chooseConfirm(event){ // 地址返回
                // event.detail 为返回选重的数组
                let key=1
                event.detail.values.forEach((item)=>{
                    if(key===1){
                        this.params.province=item.name
                    }
                    if(key===2){
                        this.params.city=item.name
                    }
                    key++
                })
                this.changeShowState();
            },
            chooseCancel(event){
                this.changeShowState();
            },
            changeShowState(){
                this.other_is_show=!this.other_is_show
                this.area_is_show=!this.area_is_show
                this.tips_is_show=!this.tips_is_show
            },
           async commit(){ //确认提交
               // if(this.params.id_name===''|| this.params.bank_number===''|| this.params.id_number===''|| this.params.bank_id===''|| this.params.subbranch===''|| this.params.province===''|| this.params.city===''|| this.params.bank_mobile===''){
               //     uni.showToast({
               //         title:"请将数据填写完整",
               //         icon:"none",
               //     })
               //     return
               // }
               if(this.user_info.is_valid>0){
                   uni.showToast({
                       title:"您已认证，请勿重复认证",
                       icon:"none",
                   })
                   return
               }
               console.log(this.params)
               if(this.params.id_name===''|| this.params.id_number===''){
                   uni.showToast({
                       title:"请将数据填写完整",
                       icon:"none",
                   })
                   return
               }
               let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
               if(!reg.test(this.params.id_number)){
                   uni.showToast({
                       title:"请输入正确的身份证号码",
                       icon:"none",
                   })
                   return
               }
               uni.showLoading({})
               let res=await this.$apis.realName(this.params)
               if(res.code===0){
                   let user_data = await this.$apis.getUserInfo({access_token:''})
                   if(user_data.code===0){
                       this.$store.commit("SET_USERINFO",user_data.data)
                   }
                   uni.showToast({
                       title:"认证成功",
                       icon:"none",
                       duration:3000
                   })
                   setTimeout(()=>{
                       uni.navigateBack({
                           delta: 1
                       });
                   },1500)
               }
               uni.hideLoading()
            },
            //获取银行列表
            async getBank(id){
                let resData=await  this.$apis.getBankList()
                if(resData.code===0){
                  resData.data.lists.forEach((item)=>{
                      if(item.id===id){
                          this.params.bank_name=item.name
                          return
                      }
                  })
                }
            },
            confirm1(event){ // 开户行姓名
                this.params.id_name=event.detail
            },
            confirm2(event){ //银行卡号
                let reg=/^([1-9]{1})(\d{15}|\d{18})$/;
                if(!reg.test(event.detail.value)){
                    uni.showToast({
                        title:"请输入正确的银行卡号",
                        icon:"none",
                    })
                    return
                }
                this.params.bank_number=event.detail.value
            },
            confirm3(event){ // 支行名称
                this.params.subbranch=event.detail.value
            },
            confirm4(event){ // 手机号
                let reg= /^[1][2,3,4,5,6,7,8,9][0-9]{9}$/
                if(!reg.test(event.detail.value)){
                    uni.showToast({
                        title:"请填写正确的手机号",
                        icon:"none",
                    })
                    return
                }
                this.params.bank_mobile=event.detail.value
            },
            confirm5(event){ // 身份证
                this.params.id_number=event.detail
            },
        },
        components:{
            MInput
        }
    }
</script>

<style lang="less" scoped>
    .button-submit{
        width: 90%;
        margin-left: 5%;
        margin-top: 10rpx;
    }
    .tips{
        position: fixed;
        width: 100%;
        bottom: 20rpx;
        font-size: 25rpx;
        text-align: center;
        color: red;
    }
</style>
